<template lang="pug">
  .coupons-list(v-if="hasCoupons()")
    divider 先领券再下单,数量有限!
    .conpons-box
      .coupon(v-for="coupon in coupons",:key="coupon.pid",@click="openCouponLink(coupon)")
        .left-info
          .money
            | ￥{{coupon.amount}}
          .tips
            | 满{{coupon.startFee}}元减{{coupon.amount}}元
        .right-btn
          .text
            | 立即领券
          .circular-base(:span="1/5")
            .circular
</template>

<script>
import Divider from './Divider'
import Window from '../helpers/window'
export default {
  name: 'CouponsList',
  props: ['coupons'],
  components: {
    Divider
  },
  methods: {
    openCouponLink (coupon) {
      if (Window.isWechat()) {
        this.$parent.$refs.taobaoPswd.open()
      } else {
        window.open(`https://uland.taobao.com/coupon/edetail?activityId=${coupon.activity_id}&pid=${coupon.pid}&itemId=${coupon.product_id}`)
      }
    },
    hasCoupons () {
      return this.coupons.length > 0
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
.coupons-list
  background: $white
  padding: 0px 5px
  .vux-divider
    margin: 0px
  .conpons-box
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: flex-start
    flex-wrap: wrap
    .coupon
      width: 50%
      padding: 5px
      font-weight: 200
      text-decoration: none
      display: flex
      flex-direction: row
      justify-content: space-between
      align-items: stretch
      .left-info
        flex: 1 1
        border: $light-red 1px solid
        border-radius: 4px 0px 0px 4px
        padding: 5px 2px 8px 2px
        display: flex
        flex-direction: column
        justify-content: space-between
        align-items: center
        .money
          font-size: 20px
          color: $light-red
          font-weight: bolder
        .tips
          font-size: .8em
          color: $gray
          text-overflow: ellipsis
          display: -webkit-box
          overflow: hidden
          -webkit-line-clamp: 1
          -webkit-box-orient: vertical
      .right-btn
        min-width: 70px
        border-radius: 0px 4px 4px 0px
        background: $light-red
        color: $white
        display: flex
        flex-direction: row
        justify-content: space-between
        align-items: center
        .text
          text-align: center
          font-size: .8em
          flex: 1 1
        .circular-base
          .circular
            width: 15px
            height: 15px
            border-radius: 50%
            background: $white
            float: right
            margin-right: -7px
</style>
